<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery.js"></script>
    <script src="../../layui/layui.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../js/myAjax.js"></script>
    <script src="../../js/utlis/edit.js"></script>
</head>
<body>
<div style="margin-left: 100px; margin-top: 100px;" class="layui-form">
    <div type="hidden" id="role_id"></div>
    <div type="hidden" id="roleId"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-inline">
            <input type="text" name="title" readonly required lay-verify="required" id="roleName" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="checkbox" readonly value="1" name="switch" lay-skin="switch">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-inline">
            <input type="text" name="title" readonly required lay-verify="required" id="createTime" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">拥有权限</label>
        <div class="layui-input-inline">
            <div id="permission"></div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function () {
            // layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
    searchByRoleId();

    function searchByRoleId() {
        let id = sessionStorage.getItem("role_id");
        let result = myAjax('/r/role/searchById', 'post', {id: id});
        console.log(result);
        if (result.code === 200) {
            $("#roleName").val(result.data.role.roleName);
            if (result.data.role.status === 1) {
                $("input:checkbox[value='1']").attr('checked', 'true');
            }
            $("#createTime").val(result.data.role.createTime);
            layui.use('tree', function () {
                var tree = layui.tree;
                let per = result.data.tree;
                //渲染
                tree.render({
                    elem: '#permission'  //绑定元素
                    , data: [per]
                    // , edit: ['add', 'update', 'del'] //操作节点的图标
                });
            });
        } else {
            alert("出了些意料之外的错误,请稍后再试!");
        }
    }
</script>
</html>